<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="Blog Phone" id="Blog">
        <div id='ecsite-section-header'>
            <div class="name_menu">
                <div style="font-size:24px;font-weight:800;color:rgba(0,0,0,0.85);">SUMMER</div>
                <div class="menu" style="justify-content: flex-end;">
                    <div class="phonemuen">
                        <div class="">
                            <img src="../img/manage_icon_nav_indent@2x.png" alt="">
                        </div>
                    </div>
                    <ul>
                        <li class="isactive">Home</li>
                        <li>About me</li>
                    </ul>
                </div>
            </div>
            <div class="header" id="header">
                <div class="img">
                    <div class="menu_fiexd">
                        <div class="imglogo">
                            <img class="imgtit" src="" alt="">

                        </div>
                    </div>
                    <div class="imglist">
                        <!-- //缩略的轮播图 -->
                        <div class="swiper-container gallery-top">
                            <div class="swiper-wrapper">

                                <div class="swiper-slide" style="background-size:100% ;background-color: #eee; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                    1</div>
                                <div class="swiper-slide" style="background-size:100% ;background-color: #ccc; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                    1</div>
                                <div class="swiper-slide" style="background-size:100% ;background-color: #eee; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                    1</div>
                                <div class="swiper-slide" style="background-size:100% ;background-color: #ccc; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                    1</div>
                                <div class="swiper-slide" style="background-size:100% ;background-color: #eee; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                    1</div>
                                <div class="swiper-slide" style="background-size:100% ;background-color: #ccc; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                    1</div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                        <!--taubs-1  taubs-2 taubs-3 taubs  和js一同更改   -->
                        <div class="taubs">
                            <div class="swiper-container gallery-thumbs">
                                <div class="swiper-wrapper">

                                    <div class="swiper-slide" style="background-size:100% 100%; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                        1
                                    </div>
                                    <div class="swiper-slide" style="background-size:100% 100%; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                        1
                                    </div>
                                    <div class="swiper-slide" style="background-size:100% 100%; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                        1
                                    </div>
                                    <div class="swiper-slide" style="background-size:100% 100%; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                        1
                                    </div>
                                    <div class="swiper-slide" style="background-size:100% 100%; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                        1
                                    </div>
                                    <div class="swiper-slide" style="background-size:100% 100%; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                        1
                                    </div>
                                    <div class="swiper-slide" style="background-size:100% 100%; background-image: url('http://img.site.maoyt.com/group1/M00/00/01/wKgAb11VG0iAV_3oAAWYSJFqrpQ969.jpg?')">
                                        1
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="name_menu_content">
            <div id='ecsite-section-aboutme'>
                <div class="content" style="margin-bottom:16px;">
                    <!-- 加入center 居中 去掉居右 -->
                    <div class="content_left about">
                        <div class="tit">Essential information</div>
                        <img class="phonelogo" src="" alt="">
                        <div class="lablelist">
                            <span>昵称</span>
                            <span>summer</span>
                        </div>
                        <div class="lablelist">
                            <span>性别</span>
                            <span>女</span>
                        </div>
                        <div class="lablelist">
                            <span>星座</span>
                            <span>双子</span>
                        </div>
                        <div class="lablelist">
                            <span>故乡</span>
                            <span>陕西 西安</span>
                        </div>
                        <div class="lablelist">
                            <span>E-mail</span>
                            <span>5632147899@qq.com</span>
                        </div>
                        <div class="lablelist">
                            <span>QQ</span>
                            <span>5632147899</span>
                        </div>
                        <div class="lablelist">
                            <span>Signature</span>
                            <span>nascetur ridiculus mus Lorem ipsum dolor sit amet, consectetur</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id='ecsite-section-introduction'>
                <div class="content" style="margin-bottom:16px;">
                    <div class="content_left about">
                        <div class="tit">Self-introduction</div>
                        <div class="jieshao"> Cum , nascetur ridiculus mus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum , nascetur
                            ridiculus mus. Cum , nascetur ridiculus mus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar
                            tempor. Cum , nascetur ridiculus mus.</div>
                    </div>
                </div>
            </div>
            <div id='ecsite-section-message-board'>
                <div class="content">
                    <div class="content_left about">
                        <div class="tit">Message board</div>
                        <!-- 历史留言板 居上居下  居上位置   -->
                        <!-- 结束 -->
                        <div class="textarea">
                            <textarea rows="10" maxlength="800"></textarea>
                            <span>Within 800 words</span>
                            <button class="send">send</button>

                        </div>

                        <!-- 历史留言板 居上居下  默认居下   -->
                        <div class="message">
                            <div class="aboutlist">
                                <div class="img"><img src="http://pic37.nipic.com/20140113/8800276_184927469000_2.png" alt="">
                                </div>
                                <div class="info">
                                    <div class="titname">
                                        <span>SUMMER01</span><span>May 27, 2019</span>
                                    </div>
                                    <div class="infocon">
                                        <span>um , nascetur ridiculus mus Lorem ipsum dolor sit amet, consectetur
                                            adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit
                                            amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
                                            Cum , nascetur ridiculus mus. </span>
                                    </div>
                                </div>
                            </div>
                            <div class="aboutlist">
                                <div class="img"><img src="http://pic37.nipic.com/20140113/8800276_184927469000_2.png" alt="">
                                </div>
                                <div class="info">
                                    <div class="titname">
                                        <span>SUMMER01</span><span>May 27, 2019</span>
                                    </div>
                                    <div class="infocon">
                                        <span>um , nascetur ridiculus mus Lorem ipsum dolor sit amet, consectetur
                                            adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit
                                            amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
                                            Cum , nascetur ridiculus mus. </span>
                                    </div>
                                </div>
                            </div>
                            <div class="aboutlist">
                                <div class="img"><img src="http://pic37.nipic.com/20140113/8800276_184927469000_2.png" alt="">
                                </div>
                                <div class="info">
                                    <div class="titname">
                                        <span>SUMMER01</span><span>May 27, 2019</span>
                                    </div>
                                    <div class="infocon">
                                        <span>um , nascetur ridiculus mus Lorem ipsum dolor sit amet, consectetur
                                            adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit
                                            amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
                                            Cum , nascetur ridiculus mus. </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="footer"><span>Copyright © 2009-2019 ecer.com. All rights reserved.</span> </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="../../src/swiperbtnrs.js"></script>
<script src="../../src/common.js"></script>